<!-- 项目审批 -->
<template>
	<view style="margin-bottom: 100rpx">
		<uni-nav-bar :fixed="true" color="#333333" background-color="#4364F7" :border="false">
			<view class="input-view">
				<uni-icons type="search" size="22" color="#666666" />
				<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="批次" @confirm="search">
				<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
			</view>
			<!-- <uni-search-bar style="width: 100%;" placeholder="搜索项目/机构" radius="100" clearButton="auto" @confirm="search" /> -->
		</uni-nav-bar>
		<scroll-view style="height: 100%;" scroll-y="true">
			<view class="mycard">
				<view v-for="(item,index) in cardList" :key="index" class="card-item">
					<uni-card is-full title="库存码单" is-shadow note="true">
						<view class="audit-card-content">
							<view class="uni-flex uni-row">
								<view class="flex-item-30">堆号</view>
								<view class="flex-item-70">{{item.heapNum}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">层号</view>
								<view class="flex-item-70">{{item.layerNum}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">码单号</view>
								<view class="flex-item-70">{{item.stackNum}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">规格</view>
								<view class="flex-item-70">{{item.spec}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">库存数量</view>
								<view class="flex-item-70">{{item.qty}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">库存重量</view>
								<view class="flex-item-70">{{item.weight}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">应发数量</view>
								<view class="flex-item-70">{{item.inQty}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">应发重量</view>
								<view class="flex-item-70">{{item.inWeight}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-30">卷号</view>
								<view class="flex-item-70">{{item.innerBatch}}</view>
							</view>						
							<view class="uni-flex uni-row">
								<view class="flex-item-30">备注</view>
								<view class="flex-item-70">{{item.remark}}</view>
							</view>		
						</view>

						<template v-slot:footer>
							<view class="footer-box">
								<view class="iconfont my-iconfont text-green"></view>
								<view class="iconfont my-iconfont text-red"></view>
								<view class="cuIcon-check text-blue" @tap="selectedClick(index)">选择</view>
							</view>
						</template>
					</uni-card>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

	import uniCard from "@/components/uni-card/uni-card"
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		props: {
			goodsOutBillId: {
				type: String,
				required: false
			},
			detailId: {
				type: String,
				required: false
			}
		},
		components: {
			uniCard,
			uniTag,
			uniIcons
		},
		computed: mapGetters(['user']),
		data() {
			return {
				mescroll: null,
				isPass: false,
				id: 0,
				// 列表数据
				cardList: [],
				datas:[],
				searchVal: ''
			}
		},
		onShow() {
			
			const params = {
				billId: this.goodsOutBillId,
				detailId: this.detailId
			  }
			this.$minApi.getInStockGoodsStacks(params).then(res => {
			
				const data = res
				if (data) {					
					this.cardList = data
				}
			}).catch(err => {
				console.log(err)
			}).finally(() => {

			})
			
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			selectedClick(index) {
				
				const item = this.cardList[index]
				this.$emit('selected', item)
			},
			search() {
				if (this.searchVal) {
					this.cardList = this.datas.filter(f => f.innerBatch === this.searchVal)
				} else {
					this.cardList = this.datas
				}				
			},
			clear() {
				this.searchVal = ''
				this.search()
			}
		}
	}
</script>

<style>
	.mescroll-totop {
		opacity: 1 !important;
	}
	
</style>
